/**
 * 载入项目引导文件
 */
require('../bootstrap');

window.Vue = require('vue');

/**
 * 载入自定义工具
 */

require('./utils');

let loadBox;//加载框

let news_empty = {
    'new_id':0,
    'title': '',
    'thumb_view_url': '',
    'author': '',
    'digest': '',
    'show_cover_pic': 1,
    'content': '',
    'content_source_url': '',
    'news_click_url': '',
    'need_open_comment': 1,
    'only_fans_can_comment': 1,
};
const app = new Vue({
    el: '#material',
    data: {
        material_data: {},
        news_index:-1,
        news_cur_data:{},
        news_list: [],
        news_actions_index : -1,
        editor:null,
    },
    computed: {
        display_material_data:function()//显示到前台的整体素材数据
        {
            if (_.isEmpty(this.material_data)){
                if (_.isEmpty(page_params.data_material) == false){
                    this.material_data = page_params.data_material;
                } else{
                    this.material_data = {
                        'material_id':0,
                        'cat_id': 0,
                        'is_forever': 1,
                    };
                }
            }
            return this.material_data;
        },
        display_new_list:function(){//显示到前台的整体文章列表
            //当图文列表为空的时候
            if (_.isEmpty(this.news_list)){
                if (_.isEmpty(page_params.data_new_list) == false){
                    this.news_list = page_params.data_new_list;
                }else{
                    this.news_list.push(news_empty);
                }
                this.news_index = 0;
            }
            return this.news_list;
        },
        news_count:function () {
            return this.news_list.length;
        },
    },
    mounted:function(){
        const _this = this;
        this.editor = UE.getEditor('content', {
            serverUrl:page_params.url_ueditorUpload,
        }); // 初始化UE
        let token = document.head.querySelector('meta[name="csrf-token"]');
        this.editor.ready(function() {
            _this.editor.execCommand('serverparam', '_token', token.content);
        });
        this.editor.addListener('contentChange', function(){
            _this.news_cur_data.content = _this.editor.getContent();
        });
    },
    watch: {
        news_index: function (val){
            //深度拷贝
            this.news_cur_data = _.cloneDeep(this.news_list[val]);
            //监听内容变更
            const _this = this;
            this.editor.ready(function(){
                _this.editor.setContent(_this.news_cur_data.content);
            });
        },
        news_cur_data: function (val){
            Vue.set(this.news_list, this.news_index, val);
        }
    },
    methods: {
        showActions:function (index){//显示操作层
            this.news_actions_index = index;
        },
        hideActions:function (index){//隐藏操作层
            this.news_actions_index = -1;
        },
        newsTrash: function (index) {//删除图文
            //如果删除当前编辑文章，则将文章索引先前一个移动
            if (index == this.news_index){
                this.news_index = index - 1;
            }
            this.news_list.splice(index, 1);
        },
        newsMonveUp: function (index) {//上移图文
            if (index == 0){
                utils.showToastr({'status':'error','title':'移动错误','message':'顶级图文无法继续上移'});
                return false;
            }
            var tempOption = this.news_list[index - 1];
            Vue.set(this.news_list, index - 1, this.news_list[index]);
            Vue.set(this.news_list, index, tempOption);
            if (this.news_index == index){
                this.news_index = index - 1;
            }
        },
        newsMoveDown: function (index) {//下移图文
            if (index >= this.news_list.length - 1){
                utils.showToastr({'status':'error','title':'移动错误','message':'顶级图文无法继续下移'});
                return false;
            }
            var tempOption = this.news_list[index];
            Vue.set(this.news_list, index, this.news_list[index + 1]);
            Vue.set(this.news_list, index + 1, tempOption);
            if (this.news_index == index){
                this.news_index = index + 1;
            }
        },
        newsEdit:function (index){
            this.news_index = index;
        },
        newsAdd:function () {//添加图文
            if (this.news_list.length >= 8){
                utils.showToastr({'status':'error','title':'添加图文错误','message':'最多只可以加入8条图文消息'});
                return false;
            }
            this.news_list.push(news_empty);
        },
        materialSave:function(){
            loadBox = layer.load(1, {
                shade: [0.3,'#fff'] //0.1透明度的白色背景
            });
            utils.ajaxPost(page_params.url_add, {material_data:this.material_data, news_list:this.news_list}, function(response, data){
                layer.close(loadBox);
                utils.showToastr(response.data, 'go');
            });
        },
    },
});

let uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: '/vendor/ueditor/third-party/webuploader/Uploader.swf',

    // 文件接收服务端。
    server: page_params.url_webupload,

    // 选择文件的按钮。可选。
    pick: {
        id: '#btn-upload-thumb-view-url',
        name:"file",  //这个地方 name 没什么用，虽然打开调试器，input的名字确实改过来了。但是提交到后台取不到文件。如果想自定义file的name属性，还是要和fileVal 配合使用。
        label: '选择封面',
        multiple:false            //默认为true，true表示可以多选文件，HTML5的属性
    },
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    //设置文件上传域的name
    fileVal:'file',
    duplicate:true,//是否可重复选择同一文件
    resize: false,
    compress: null,//图片不压缩
    chunked: true,//分片处理
    fileSingleSizeLimit:1024 * 1024,
    chunkSize: 5 * 1024 * 1024, //每片5M
    chunkRetry:false,//如果失败，则不重试
    threads:1,//上传并发数。允许同时最大上传进程数。
    // runtimeOrder: 'flash',
    // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
    disableGlobalDnd: true
});
uploader.on('uploadBeforeSend', function(block, data, headers){
    data.fileType = 'image';
    //头部成熟
    let token = document.head.querySelector('meta[name="csrf-token"]');
    headers['X-CSRF-TOKEN'] = token.content;
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function( file, percentage ) {
    loadBox = layer.load(1, {
        shade: [0.3,'#fff'] //0.1透明度的白色背景
    });
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function(file, response ) {
    layer.close(loadBox);
    if (response.status == 'success' && _.isEmpty(response.data) == false){
        app.news_cur_data.thumb_view_url = response.data.view_url;
    }else{
        utils.showToastr({'status':'error','title':'上传失败','message':file.message});
    }
});
// 文件上传失败，显示上传出错。
uploader.on('uploadError', function( file ) {
    layer.close(loadBox);
    utils.showToastr({'status':'error','title':'上传失败','message':'文件上传失败'});
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {

});